<script>
import option from "@/assets/js/option";
import { getPresentDetail, registerInCar } from "@/api/modules/order";
import axios from "axios";
import { ImagePreview, Toast } from "vant";
import Keyboard from "@/components/vant-number-plate/vnp-keyboard";
import { GetPosConfig } from "@/api/modules/home";

export default {
  computed: {
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
    base64UrlGetter() {
      return this.$store.getters.base64UrlGetter;
    },
  },
  components: {
    "vnp-keyboard": Keyboard,
  },
  data() {
    return {
      showInput: false,
      columns: option.carType,
      showPicker: false,
      loading: false,
      params: {
        parkspaceCode: this.$route.query.parkspaceCode,
        carNo: this.$route.query.carNo,
        roadCode: this.$route.query.roadCode,
        carType: "0",
        carImg: [],
      },
      inTicketConfig: {},
    };
  },
  watch: {
    base64UrlGetter: {
      handler() {
        if (this.base64UrlGetter) {
          this.showBitmapBase64(this.base64UrlGetter);
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    window.showBitmapBase64 = this.showBitmapBase64;
    this.getGetPosConfig();
  },
  methods: {
    async getGetPosConfig() {
      const { code, data } = await GetPosConfig({});
      if (code === 200) {
        this.inTicketConfig = {
          ...JSON.parse(data.inTicketConfig),
          payTicketQrCode: data.payTicketQrCode,
        };
      }
    },
    ImagePreviewFn() {
      if (!this.params.carImg.length) {
        Toast("暂无图片");
        return;
      }
      ImagePreview({
        images: [...this.params.carImg],
        closeable: true,
      });
    },
    onConfirm(selectedOptions) {
      this.params.carType = selectedOptions.value;
      this.showPicker = false;
      console.log();
    },
    async registration(type) {
      const { code, data } = await registerInCar(this.params);
      if (code === 200) {
        if (type === "pay") {
          this.$router.push({
            path: "/payCar",
            query: {
              id: data,
            },
          });
        } else {
          this.getInitFn(data);
        }
      }
    },
    async getInitFn(parkingRecordId) {
      const { code, data } = await getPresentDetail({
        parkingRecordId: parkingRecordId,
        tollmanId: this.userInfo.id || "1647546075499859970",
      });
      if (code === 200) {
        this.loadData = data;
        let params = {};
        params.title = this.inTicketConfig.title;
        params.message = this.inTicketConfig.message;
        if (this.inTicketConfig.isTollman) {
          params["收费员"] = this.userInfo.tollmanName;
        }

        if (this.inTicketConfig.isParkCode) {
          params["停车路段"] = this.loadData.parkName;
        }

        params["泊车号"] = this.loadData.parkspaceCode;
        if (this.inTicketConfig.isCarNum) {
          params["车牌号"] = this.loadData.carNo || "无牌车";
        }
        if (this.inTicketConfig.isCarType) {
          params["车辆类型"] = this.$utils.filterOpt(
            this.loadData.carType,
            "carType"
          );
        }

        if (this.inTicketConfig.isInTime) {
          params["入车时间"] = this.loadData.sysTime;
        }

        params.payTicketQrCode = this.inTicketConfig.payTicketQrCode;

        try {
          const str = JSON.stringify(params);
          // eslint-disable-next-line no-undef
          window.android.printTicket(str);
        } catch (e) {
          console.log(e);
        }
        this.$router.push("/home");
      }
    },

    deleteFn(index) {
      this.params.carImg.splice(index, 1);
    },
    async afterRead() {
      // eslint-disable-next-line no-undef
      window.android.goCameraActivity();
      // 此时可以自行将文件上传至服务器
    },

    async showBitmapBase64(file) {
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "上传中...",
      });
      this.loading = true;
      let obj = {};
      obj.data = file;
      obj.packageName = `image/app/${this.userInfo.parkCode}/${this.params.roadCode}`;
      axios
        .post(
          `${process.env.VUE_APP_UPLOAD_URL}/file/manage/upload/base64`,
          obj
        )
        .then((res) => {
          if (res.data.code === 200) {
            this.params.carImg.push(res.data.data);
          }
          Toast.clear();
        })
        .catch(() => {
          Toast.clear();
        });
    },
  },
};
</script>
<template>
  <div class="carForm">
    <vnp-keyboard v-model="params.carNo" :show.sync="showInput"></vnp-keyboard>
    <div class="carFormHead">
      <van-nav-bar title="输入车牌">
        <template #left>
          <span
            style="font-size: 30px; background-color: #06c68a; padding: 4px 0"
            @click="$router.go(-1)"
            class="tc ting-fanhui"
            >返回
          </span>
        </template>
      </van-nav-bar>
    </div>
    <div class="carForm-content">
      <div class="carForm-content-car">
        <van-cell-group>
          <van-cell title="车位">
            <template #default>
              <div class="carForm-content-car-right">
                {{ params.parkspaceCode }} <i class="tc ting-right"></i>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="carForm-content-car" @click="showInput = true">
        <van-cell-group>
          <van-cell title="车牌号">
            <template #default>
              <div class="carForm-content-car-right">
                {{ params.carNo }} <i class="tc ting-right"></i>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="carForm-content-car">
        <van-cell-group>
          <van-cell title="车辆类型" @click="showPicker = true">
            <template #default>
              <div class="carForm-content-car-right">
                {{ $utils.filterOpt(params.carType, "carType") }}
                <i class="tc ting-right"></i>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <div class="carForm-content-car carForm-content-upload">
        <div
          v-for="(item, index) in params.carImg"
          :key="item"
          class="carForm-content-upload-item"
        >
          <img
            @click="ImagePreviewFn"
            :src="item"
            alt=""
            style="width: 100%; height: 100%"
          />
          <div class="delete" @click.stop="deleteFn(index)">
            <van-icon name="delete" />
          </div>
        </div>
        <div class="carForm-content-upload-item" @click="afterRead">
          <van-icon name="photograph" />
        </div>
      </div>
    </div>

    <div class="carForm-btn">
      <van-button size="large" @click="registration">登记入车</van-button>
      <van-button
        color="linear-gradient(to right, #a7f19e, #06C68A)"
        @click="registration('pay')"
        size="large"
        >预支付入车
      </van-button>
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<style scoped lang="scss">
.carForm {
  width: 100%;
  height: 100vh;
  padding-top: 48px;
  box-sizing: border-box;

  .carFormHead {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);

    i {
      font-size: 20px;
    }
  }

  .carForm-content {
    width: calc(100% - 24px);
    margin: 0 auto;
    margin-top: 20px;
    background: white;

    .carForm-content-car {
      box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 10px;
    }

    .carForm-content-upload {
      padding: 10px;
      box-sizing: border-box;
      margin-bottom: 0px;
      display: flex;

      .carForm-content-upload-item {
        width: 80px;
        height: 80px;
        background-color: #f2f3f5;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-right: 10px;

        .delete {
          position: absolute;
          right: 10px;
          top: 10px;
          z-index: 100;
        }
      }
    }
  }

  .carForm-btn {
    position: fixed;
    width: 100%;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .van-button {
      width: 45%;
      font-weight: bold;
    }
  }
}
</style>
